<template>
  <div class='container'>
    <el-dialog
      title="预览文章"
      :visible="showPreview"
      width="50%"
      @close="closePreview">
      <div>
        <h3>{{previewList.title}}</h3>
        <span>{{previewList.createTime | artTime}}</span>
        <span>{{previewList.username}}</span>
        <span><i class="el-icon-view"></i>{{previewList.visits}}</span>
        <div>
          <el-divider></el-divider>
          <p v-html="previewList.articleBody"></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    previewList: {
      type: Object,
      required: true
    }
  },
  methods: {
    closePreview () {
      this.$emit('update:showPreview', false)
    }
  }
}
</script>

<style scoped lang='scss'>
  span {
    margin-right: 20px;
  }
</style>
